<template>
  <div class="notice-page">
    <u-empty v-if="!dataList.length" text="暂无数据" mode="list"></u-empty>
    <scroll-view scroll-y="true" @scrolltolower="onScroll" style="height: 100%">
      <view v-for="(item, index) in dataList" :key="index">
        <view class="flex flex-direction-column background-color-white notice-item"
              style="border-radius: 16rpx; margin: 32rpx 32rpx 32rpx; padding: 40rpx 36rpx; position: relative;"
              @click="toDetail(item)">
          <!-- 未读红点 -->
          <view v-if="!item.isRead" class="unread-dot"></view>
          <text class="notice-title">{{item.title}}</text>
          <view style="height: 24rpx;"></view>
          <view class="notice-content">{{ item.content }}</view>
          <view style="height: 16rpx;"></view>
          <view class="notice-time">{{ item.time }}</view>
        </view>
      </view>
      <u-loadmore v-if="dataList.length" :status="loading" />
      <div style="height: 40rpx"></div>
    </scroll-view>
  </div>
</template>
<script>
import Page from "../../components/Page.vue";
import mixin from "../../common/mixin.js";
export default {
  name: "index",
  mixins: [mixin],
  components: { Page},
  data() {
    return {
      dataList: [
        {
          title: '欢迎使用小程序',
          content: '欢迎使用小程序',
          time: '2021-12-01 12:12:12'
        }
      ]
    }
  },
  onLoad() {
    this.getList()
  },
  methods: {
    toDetail(item) {
      console.log(item)
      uni.navigateTo({
        url: `/pages/notice/detail?id=${item.id}`
      })
    },
    getList() {
      uni.showLoading({
        title: '加载中',
        mask: true,
        duration: 0
      })
      this.$api.getNoticePage({
        pageNo: this.pageNum,
        pageSize: this.pageSize,
      }).then(res => {
        this.totalCount = res.total
        let list = []
        res.list.forEach(item => {
          list.push({
            ...item
          })
        })
        if (this.pageNum === 1) {
          this.dataList = [
          ]
        }
        this.dataList = [
          ...this.dataList,
          ...list
        ]
        if (this.pageNum >= this.totalPage) {
          this.loading = 'nomore'
        } else {
          this.loading = 'loadmore'
        }
      }).finally(() => {
        uni.hideLoading()
      })
    }
  }
}
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}
.notice-page {
  height: 100%;
  overflow: hidden;
  background-color: #F3F5F5;
}
.notice-item {
  .notice-title {
    color: #3d3d3d;
    font-size: 32rpx;
    font-weight: bold;
  }
  .notice-content {
    font-size: 28rpx;
    line-height: 40rpx;
    color: #666;
  }
  .notice-time {
    font-size: 24rpx;
    color: #999;
    font-family: DIN;
  }
  .unread-dot {
    position: absolute;
    top: 16rpx;
    right: 16rpx;
    width: 16rpx;
    height: 16rpx;
    background-color: #ff4d4f;
    border-radius: 50%;
  }
}
</style>
